<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是Demo组件</h1>
  <h1>一个人的信息：</h1>
  姓：<input type="text" v-model="person.firstName"><br>
  名：<input type="text" v-model="person.lastName"><br>
  全名：<span>{{ person.fullName }}</span><br>
  姓名：<input type="text" v-model="person.fullName"><br>
</template>

<script>
// 引入ref 函数
import {computed, reactive} from "vue";

export default {
  name: 'DemoPage',
  // // 使用vue2的计算属性【强烈不推荐，建议使用setup里面的计算属性】
  // computed: {
  //   // 全名
  //   fullName() {
  //     return this.person.firstName + "-" + this.person.lastName;
  //   }
  // },
  // setup: function () {
  //
  // }

  // Vue3引入了新的配置项，值是一个函数，setup是所有Composition API（组合API）“ 表演的舞台 ”。
  // 组件中所用到的：数据、方法等等，均要配置在setup中。
  // - setup函数的两种返回值：
  //    - 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。【重点关注！】
  //    - 若返回一个渲染函数：则可以自定义渲染内容。【了解】
  setup() {
    // 【todo 通过 reactive 封装整个对象的方式来实现数据的响应式】
    let person = reactive({
      firstName: '张',
      lastName: '飒飒',
    });

    // 使用setup里面的计算属性，需要import
    // 计算属性的简写形式，没有考虑计算属性被修改的情况。
    // person.fullName = computed(() => {
    //   return person.firstName + '-' + person.lastName;
    // })

    // 计算属性的完整形式，考虑计算属性读取和被修改的情况。
    person.fullName = computed({
      set(value) {
        const nameArr = value.split('-');
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
      get() {
        return person.firstName + "-" + person.lastName;
      }
    });

    // 方式一：返回对象【常用】
    return {
      person,
    }
  },
}
</script>

<style>

</style>
